<template>
    <div class='menuItem' @click='toPage(linkUrl)'>
        <div class='flex'>
            <img :src="imgSrc">
             <p>{{menuTitle}}</p>
        </div>

    </div>
</template>

<script>
    export default {
    	data(){
            return{

            }
        },
        props: ['imgSrc', 'menuTitle','linkUrl'],
        methods:{
            toPage(linkUrl){
                  this.$router.push({
                     path: linkUrl,
                })
            }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .menuItem{
         cursor: pointer;
         position: relative;
        >.flex{
             @include wh(100%, auto);
             align-items:center;
             justify-content:center;
            img{
                 width:100%;
            }
        }
        p{
             @include sc(.56rem, #333);
             text-align:center;
             position: absolute;
             font-size: .68rem;
             color: #fff;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              margin: auto;
              width: 3rem;
              height: 1rem;
          }
    }
</style>
